<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
	<ui:composition template="template/template.xhtml">
		<ui:define  name="page-title" >#{messages.novoMaterial}</ui:define >
		<ui:define  name="center">
			<h:outputText styleClass="title" value="#{messages.novoMaterial}"/>
        	<p:messages id="messages" autoUpdate="true" showSummary="true"/> 
           	
			
			<h:panelGrid columns="2" id="fields">  
	
	 			<h:outputLabel value="#{messages.novoMaterial}" for="categoria"/>
	 
	 			<p:selectOneMenu id="categoria" value="#{mercadoriaController.novoMaterial.categoria.id}" required="true">  
		            <f:selectItem itemLabel="#{messages.seleccione}" itemValue="" />  
		            <f:selectItems value="#{mercadoriaController.categoriasMaterial}" itemLabel="#{categoria.nome}" var="categoria" itemValue="#{categoria.id}"/>  
		        </p:selectOneMenu> 

				<h:outputLabel for="nome" value="#{messages.nome}" /> 
          		<p:inputText id="nome" value="#{mercadoriaController.novoMaterial.nome}" required="true"/>
          		
          		<h:outputLabel for="limite" value="#{messages.limite}" /> 
          		<p:inputText id="limite" value="#{mercadoriaController.novoMaterial.limite}"/>
	
				<h:outputLabel for="preco" value="#{messages.preco}" /> 
          		<p:inputText id="preco" value="#{mercadoriaController.novoMaterial.preco}"/>
	
		 		<h:column/>
     					
			</h:panelGrid>
			
			<p:panel>
				<h:panelGrid columns="4" id="novo-stock" cellspacing="10"> 
					<h:column>
						<h:outputLabel value="#{messages.centro}" for="centro"/>
			 			<p:selectOneMenu id="centro" value="#{centroController.centro.id}" style="display: inline-block; vertical-align: middle;"  required="true">  
                        	<f:selectItem itemLabel="#{messages.seleccione}" itemValue="" /> 
                        	<f:selectItems value="#{centroController.centros}" var="centro" itemValue="#{centro.id}" itemLabel="#{centro.nome}" />
                        	<p:ajax update="deposito" event="change" process="@this"/>
                    	</p:selectOneMenu>  
                   	</h:column>
                   	
                   	<h:column>
						<h:outputLabel value="#{messages.deposito}" for="deposito"/>
			 			<p:selectOneMenu id="deposito" value="#{mercadoriaController.stock.deposito.id}" style="display: inline-block; vertical-align: middle;" required="true">  
                        	<f:selectItem itemLabel="#{messages.seleccione}" itemValue="" /> 
                        	<f:selectItems value="#{centroController.centroDepositosArmazenamento}" var="deposito" itemValue="#{deposito.id}" itemLabel="#{deposito.nome}" />  
                    	</p:selectOneMenu> 
                   	</h:column>
                   	
                   	<h:column>
						<h:outputLabel value="#{messages.quantidade}" for="quantidade"/>
			 			<p:inputText id="quantidade" value="#{mercadoriaController.stock.quantidade}" style="display: inline-block; vertical-align: middle;" required="true"/>
                   	</h:column>
                   	
                   	<h:column>
                   		<p:commandLink process="novo-stock" action="#{mercadoriaController.novoStock}" styleClass="ui-icon ui-icon-plusthick" update="novo-stock, stockList"/>
                   	</h:column>
                   	
				</h:panelGrid>  
				
				<p:dataTable rowIndexVar="index" id="stockList" var="stock" value="#{mercadoriaController.stockList}" 
					 widgetVar="stockListTable">  

			        <p:column headerText="#{messages.centro}" style="width:25%">  
			             <h:outputText value="#{stock.deposito.centro.nome}" />
			        </p:column> 
			        
			        <p:column headerText="#{messages.deposito}" style="width:25%">  
			           <h:outputText value="#{stock.deposito.nome}" />
			        </p:column> 
			        
			        <p:column headerText="#{messages.quantidade}" style="width:25%">  
			            <h:outputText value="#{stock.quantidade}" />
			        </p:column>
			        
			        <p:column style="width:20px">  
			            <p:commandLink action="#{mercadoriaController.removeStock(index)}" styleClass="ui-icon ui-icon-closethick" process="@this" update="stockList"/>
			        </p:column> 
			  
			    </p:dataTable>
		    </p:panel>
  			<div>
 				<p:commandButton value="#{messages.voltar}" action="mercadorias"  ajax="false" immediate="true"/> 
 				<p:commandButton value="#{messages.guardar}" action="#{mercadoriaController.saveNewMaterialAction}"  process="@this,fields"/> 
 			</div>
		</ui:define >
	</ui:composition>
</html>